<template>
  <div class="main-desc" :style="[$parent.getTitleDirStyle, getModBottom]">
    <RTitle :title-color="getModColor" icon="desc" :isShow="getSettingStatus('title')"
            :isFixed="$parent.getTitleDir==='row'" v-model="title"/>
    <RInput v-model="dataLs.description" class="desc-content"
            hint="工作积极认真负责，熟练运用办公软件，善于在工作中发现问题，解决问题，有较强的分析能力。有两年的运营经验，熟悉公众号、微博、头条等新媒体平台推广方式。"></RInput>

    <!--操作-->
    <ROperator :operators="['drag', 'setting']" @setting="onChangeSetting" @drag="onDrag($event)"/>
    <!--设置-->
    <div v-show="changeSetting" @mouseleave="onChangeSetting">
      <RSetting v-model="settings.switchLs"></RSetting>
    </div>
  </div>
</template>

<script>
import RTitle from '../base/RTitle'
import RInput from '../base/RInput'
import ROperator from '../base/ROperator'
import mixin from '../../store/mixin'
import RSetting from '../base/RSetting'

export default {
  name: 'Description',
  components: {RTitle, RInput, ROperator, RSetting},
  mixins: [mixin],
  data () {
    return {
      changeSetting: false
    }
  },
  props: ['compId'],
  methods: {
    onChangeSetting () {
      this.changeSetting = !this.changeSetting
    }
  }
}
</script>

<style scoped lang="less">

  .main-desc {
    .desc-content:hover {
      background: rgba(135, 206, 250, 0.3);
    }
  }
</style>
